<template>
  <div class="content">
    <!-- 系统公告 -->
      <div class="system-body">
        <el-tabs v-model="activeName"
                 @tab-click="handleTabClick">
          <el-tab-pane label="已读"
                       name="read">
            <el-table :data="readData"
                      :header-cell-style="{'background-color':'rgba(0, 0, 0, .04)','color':'#000000'}"
                      v-loading="loading"
                    >
              <el-table-column label="公告内容"
                               min-width="300"
                               prop="content">
                <template v-slot="{row}">
                  <el-link target="_blank"
                           @click="$router.push({name:'systemAnnouncementDetail',params:{id:row.id}})">{{row.content}}</el-link>
                </template>
              </el-table-column>
              <el-table-column label="发布人"
                               min-width="100"
                               prop="name"></el-table-column>
              <el-table-column label="发布日期"
                               min-width="100"
                               prop="date"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="未读"
                       name="unread">
            <el-table :data="unReadData"
                      :header-cell-style="{'background-color':'#f5f7fa','color':'#000000'}"
                      v-loading="loading">
              <el-table-column label="公告内容"
                               min-width="300"
                               prop="content">
                <template v-slot="{row}">
                  <el-link target="_blank"
                           @click="$router.push({name:'systemAnnouncementDetail',params:{id:row.id}})">
                           <span class="dot"></span>
                           {{row.content}}
                          </el-link>
                </template>
              </el-table-column>
              <el-table-column label="发布人"
                               min-width="100"
                               prop="name"></el-table-column>
              <el-table-column label="发布日期"
                               min-width="100"
                               prop="date"></el-table-column>
            </el-table>
          </el-tab-pane>

        </el-tabs>
      </div>
  </div>
</template>

  <script>
export default {
    name: 'systemAnnouncement',
    data() {
        return {
            // 表格loading
            loading: false,
            // 已读数据
            readData: [],
            // 未读数据
            unReadData: [],
            activeName: 'read',
        };
    },
    created() {
        this.getreadData();
    },
    mounted() {},
    methods: {
        // 获取已读列表
        getreadData() {
            this.loading = true;
            setTimeout(() => {
                this.readData = [
                    { id: 'qwe', content: '【公告1】关于升级通知', name: '某某某', date: '2042-1-1' },
                    { id: 'qw2e', content: '【公告2】关于xxxxxxx', name: '某某某1', date: '2033-1-1' },
                ];
                this.loading = false;
            }, 1000);
        },
        // 获取未读列表
        getunReadData() {
            this.loading = true;
            setTimeout(() => {
                this.unReadData = [
                    { id: 'qw3e', content: '【公告】关于客户协同系统优化升级通知', name: '某某某', date: '2022-1-1' },
                    { id: 'qweqqq', content: '【公告】关于客户协同系知', name: '某某某1', date: '2023-1-1' },
                ];
                this.loading = false;
            }, 1000);
        },
        handleTabClick(tab) {
            if (tab == 'read') {
                this.getreadData();
            } else {
                this.getunReadData();
            }
        },
    },
};
</script>

  <style lang="scss" scoped>
.content {
    height: 100%;
    font-size: 19px;
    background: #fff;
    border-radius: 11px;
    .system-body {
        .el-link.el-link--default {
            color: #333333;
            :hover {
                color: #409eff;
            }
        }
        .dot{
          width: 8px;
          height: 8px;
          background: #FF4D4F;
          border-radius: 13px;
          border: 1px solid #FFFFFF;
          display: inline-block;
        }
    }
    
}
</style>
